<!-- 前端使用浏览器内置的WebSocket -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 400px;
        height: 500px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <input type="text" />
    <button>发送</button>

    <script>
      const name = prompt("请输入用户名");
      const id = new Date().getTime();
      const input = document.querySelector("input");
      const button = document.querySelector("button");
      const box = document.querySelector("#box");
      // 连接websocket地址，返回一个实例
      // const ws = new WebSocket("wss://echo.websocket.org");
      const ws = new WebSocket("ws://10.31.167.219:8080");

      // 连接成功的回调函数
      ws.onopen = function (evt) {
        console.log("Connection open ...");
        // send前端发给后端
        // ws.send("Hello WebSockets!");
      };

      // 接收到信息的回调函数
      ws.onmessage = function (evt) {
        // console.log("Received Message: " + evt.data);
        // 关闭长连接
        // ws.close();
        // box.innerHTML += `<p>${evt.data}</p>`;

        const { name, value, key } = JSON.parse(evt.data);
        // 拿到的key是和当前页面的id相同的，就是本人
        if (key === id) {
          box.innerHTML += `<p style="text-align: right">${name}说：${value}</p>`;
        } else {
          box.innerHTML += `<p>${name}说：${value}</p>`;
        }
      };

      // 成功关闭的回调函数
      ws.onclose = function (evt) {
        console.log("Connection closed.");
      };

      button.onclick = () => {
        // console.log(input.value);
        // ws.send(name + "说:" + input.value);
        // websocket只允许发字符串
        ws.send(
          JSON.stringify({
            name: name,
            value: input.value,
            key: id,
          })
        );
        input.value = "";
      };

      // 心跳连接
      // setInterval(() => {
      //   ws.send("")
      // }, 30000)
    </script>
  </body>
</html>
